<template>
  <view class="services">
    <view class="top">
      <uv-navbar title="商品详情" height="44px" titleStyle="{font-weight: bold;font-size: 1.1rem;}"
        @leftClick="leftClick"></uv-navbar>
    </view>
    <!-- 服务 -->
    <view class="photo">
      <view class="one">
        <uv-swiper height="400rpx" :list="list"></uv-swiper>
      </view>
      <view class="two">
        <view class="two-left">￥<view class="color">1452.00</view>
        </view>

      </view>
      <view class="three">33.5码|Air Jordan 34“Snow Leopard”薄荷绿郭艾伦实战篮球鞋 黑白</view>
    </view>
    <!-- 商品介绍 -->
    <view class="introduced">
      <view class="head">商品介绍</view>
      <view class="center">
        <image src="../../static/image/运动鞋.jpg" mode=""></image>
      </view>
    </view>
    <!-- 盒子 -->
    <view class="box"></view>
    <!-- 下单 -->
    <view class="place">
      <view class="left">
        <view class="left1">
          <image src="../../static/image/首页.png" mode=""></image>
        </view>
        <view class="left2">首页</view>
      </view>
      <view class="left">
        <view class="left1">
          <image src="../../static/image/收藏.png" mode=""></image>
        </view>
        <view class="left2">收藏</view>
      </view>
      <view class="right">
        <uv-button @click="open" customStyle="{color:#149595;width:120px;}" size="large" color="#d6f1ed" shape="circle"
          text="加入购物车"></uv-button>
        <uv-button customStyle="{color:#149595;width:120px;}" size="large" color="#008c8c" shape="circle"
          text="立即购物"></uv-button>
      </view>
    </view>
    <!-- 弹出层 -->
    <view class="pup">
      <uv-popup ref="popup" round="20" custom-style="height: 640rpx;" closeable="ture" closeIconPos="top-right"
        mode="bottom" @change="change1">
        <view class="more">
          <view class="more-left">
            <image src="../../static/logo.png" mode=""></image>
          </view>
          <view class="more-right">
            <view class="more-right1">￥200</view>
            <view class="more-right2">秋新品羽绒服女简约直筒短款</view>
          </view>
        </view>
        <view class="specifications">
          <view>规格</view>
          <view class="tabs">
            <view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
              <uv-tags shape="circle " :text="`规格${index + 1}`" :plain="!item.checked" type="warning" :name="index"
                @click="radioClick">
              </uv-tags>
            </view>
          </view>
        </view>
        <view class="number">
          <view>数量</view>
          <view> <uv-number-box v-model="value1" @change="valChange"></uv-number-box>
          </view>
        </view>
        <view class="btn">
          <uv-button customStyle="{color:#149595;}" size="large" color="#008c8c" shape="circle" text="确定"></uv-button>
        </view>
      </uv-popup>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        // 标签
        radios: [{
            checked: true
          }, {
            checked: false
          }, {
            checked: false
          },
          {
            checked: false
          }
        ],
        checkboxs: [{
          checked: true
        }, {
          checked: false
        }, {
          checked: false
        }, {
          checked: false
        }],
        // 轮播图
        list: [
          '/static/image/篮球鞋.jpg',
          '/static/image/篮球鞋.jpg',
          '/static/image/篮球鞋.jpg',
        ],
        tips: '',
        value: '内容'

      }
    },
    methods: {
      // 步进器
      valChange(e) {
        console.log('当前值为: ' + e.value)
      },
      // 单标签
      radioClick(name) {
        this.radios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      checkboxClick(name) {
        this.checkboxs[name].checked = !this.checkboxs[name].checked
      },
      // 弹出层
      open() {
        this.$refs.popup.open('bottom');
      },
      change(e) {
        console.log('弹窗状态改变：', e);
      },
      change1(e) {
        console.log('弹窗状态改变：', e);
      },
      //返回login
      leftClick() {

        console.log('leftClick');
      },

    }
  }
</script>

<style>
  @import url('productdetails.scss');
</style>